import '@umijs/max';
import { Button, Card, Form, Input, message, Select, Space, Upload } from 'antd';
import React, { useState } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import TextArea from 'antd/es/input/TextArea';
import { genChartByAiAsyncMqUsingPost } from '@/services/api/chartController';
import { useForm } from 'antd/es/form/Form';

/**
 * 用户管理页面
 *
 * @constructor
 */
const AddChartAsyncPage: React.FC = () => {
  const { Option } = Select;

  // 是否显示加载
  const [loading, setLoading] = useState<boolean>(false);

  // 表单引用
  const [form] = useForm();

  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };

  const onFinish = async (values: any) => {
    if (loading) {
      return;
    }
    setLoading(true);

    const params = {
      ...values,
      file: undefined,
    };

    try {
      const res = (await genChartByAiAsyncMqUsingPost(params, {}, values.file.file.originFileObj))
        .data as API.BiResponse;
      if (res) {
        form.resetFields();
        message.success('分析任务提交成功,请在我的图表页面查看');
      } else {
        message.error('分析任务提交失败');
      }
    } catch (e: any) {
      message.error('分析任务提交失败 ' + e.message);
    }
    setLoading(false);
  };

  return (
    <div className="add-chart-async">
      <Card title={'智能分析（异步）'}>
        <Form
          form={form}
          name="add-chart"
          labelAlign="left"
          {...formItemLayout}
          onFinish={onFinish}
          initialValues={{}}
          style={{ maxWidth: 600 }}
        >
          <Form.Item
            label="图表名称"
            name="name"
            rules={[{ required: true, message: '请输入图表名称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="分析需求"
            name="goal"
            rules={[{ required: true, message: '请输入分析需求' }]}
          >
            <TextArea placeholder="请输入你的分析需求，比如分析网站用户的增长情况" />
          </Form.Item>
          <Form.Item
            name="chartType"
            label="图表类型"
            hasFeedback
            rules={[{ required: true, message: '请选择图表类型!' }]}
          >
            <Select placeholder="请选择图表类型">
              <Option value="line">折线图</Option>
              <Option value="bar">柱状图</Option>
              <Option value="pie">饼图</Option>
              <Option value="radar">雷达图</Option>
              <Option value="scatter">散点图</Option>
              <Option value="histogram">直方图</Option>
              <Option value="box">箱线图</Option>
              <Option value="area">面积图</Option>
              <Option value="bubble">气泡图</Option>
              <Option value="heatmap">热力图</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="file"
            label="Excel数据"
            rules={[{ required: true, message: '请上传图表数据!' }]}
          >
            <Upload name="excel">
              <Button icon={<UploadOutlined />}>上传 CSV 文件</Button>
            </Upload>
          </Form.Item>
          <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
            <Space>
              <Button loading={loading} type="primary" htmlType="submit">
                提交
              </Button>
              <Button htmlType="reset">重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default AddChartAsyncPage;
